<template>
	<view class="main-container">
		<HeaderBar title="民宿之州" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<view class="swiper-container">
			<image class="clod-image1"
				src="http://img.abatour.com/2025-05-06/图层 809_1746516701560.png" mode="widthFix" alt=""/>
				<image class="clod-image2"
				src="http://img.abatour.com/2025-05-06/图层 810_1746516896325.png" mode="widthFix" alt=""/>
				<image class="clod-image3"
				src="http://img.abatour.com/2025-05-06/图层 811_1746516931917.png" mode="widthFix" alt=""/>
				<image class="title-img"
				src="http://img.abatour.com/2025-05-04/之州@2x_1746344462040.png" mode="widthFix" alt=""/>
				<view class="text-box-img">
					<imageDanmu ref="danmu"
					  :imagesList="imageList"
					  :duration="6000"
					  @item-click="handleClick"/>
					
				</view>
				
				
		</view>
		<view class="homestay-content-box">
			<view class="homestay-top-tab" v-if="tabsList">
					<image @click="changeActive(tabsList[0].code)" class="homestay-top-tab-item1" :src="active==tabsList[0]?.code?active20:noActive20" alt="" mode="heightFix" :lazy-load="true"/>
					<image @click="changeActive(tabsList[1].code)" class="homestay-top-tab-item2" :src="active==tabsList[1]?.code?active50:noActive50" alt="" mode="heightFix" :lazy-load="true"/>
			</view>
			<view v-if="homestayArticleDataList.length" class="homestay-article-container">
				<view  class="homestay-article-container-item" v-for="item in homestayArticleDataList" @click="gotoNewsDetail(item)" :key="item">
					<image class="homestay-article-image" :src="item.headImage" mode="aspectFill" lazy-load></image>
					<view class="article-content-text">
						<text class="article-text-title">{{item.title}}</text>
						<text class="article-text-content">{{item.subTitle}}</text>
					</view>
				</view>
			<wd-loadmore
			    custom-class="loadmore"
			    :state="loading"
			    :loading-props="{color:'#26704e'}"
			></wd-loadmore>
			</view>
				<view class="nodataStyle" v-else>
					<wd-status-tip image="content" tip="暂无内容" />
				</view>
				<wd-gap safe-area-bottom height="40"></wd-gap>
		</view>
		<view class="back-top">
			<wd-backtop :scrollTop="scrollTop"></wd-backtop>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,reactive,toRaw
	} from "vue";
	import {onLoad} from "@dcloudio/uni-app";
	import {
		getDataList,
	  } from '../../utils/commonMethods'
	import HeaderBar from "@/components/HeaderBar/index.vue";
	import imageDanmu from "../components/Danmaku.vue";
	import {
		styleSettingContent,
		commonWordList
	} from "@/api/system";
	const homestayArticleDataList= ref ([])
	const imageList = [
	  'http://img.abatour.com/2025-05-06/图层 789@2x_1746510542079.png',
	  'http://img.abatour.com/2025-05-06/图层 791@2x_1746510581307.png',
	  'http://img.abatour.com/2025-05-06/图层 792@2x(1)_1746510615597.png',
	  'http://img.abatour.com/2025-05-06/图层 792@2x_1746510646564.png',
	]

	const active = ref(1)
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const clickLoading = ref(false);
	const loading=ref('')
	const iconList=reactive({
		active20:"http://img.abatour.com/2025-05-04/金熊猫选中 拷贝@2x_1746346813081.png",
		noActive20:"http://img.abatour.com/2025-05-04/金熊猫选中 拷贝@2x_1746345881951.png",
		active50:"http://img.abatour.com/2025-05-04/银熊猫未选中 拷贝@2x_1746346918990.png",
		noActive50:"http://img.abatour.com/2025-05-04/银熊猫未选中 拷贝@2x_1746346878636.png",
	})
	const tabsList=ref([
		{
			code:'1'
		},
		{
			code:'2'
		}
	])
	const handleClick=(e)=>{
		console.log(e)
	}
	
	const {active20,noActive20,active50,noActive50} = toRaw(iconList)
	const scrollTop = ref(0)
	const changeActive = (activeSelect) => {
		if(activeSelect==active.value) return
		active.value=activeSelect
		queryData.query.pageNo=1
		homestayArticleDataList.value=[]
		initData()
	};
	const gotoAllNews = () => {
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/newsList"
		})
	};

	const gotoCallBack = () => {
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/callbackInput"
		})
	};
	const gotoNewsDetail = (item) => {
			if(clickLoading.value) return
			clickLoading.value=true
			uni.navigateTo({
				url:"/fiveMajorSubPack/pages/hospitable/newsDetail?id="+item.id||1,
				complete(){
					clickLoading.value=false
				}
			})
		};
	onPageScroll((e) => {
		 scrollTop.value = e.scrollTop
		if (e.scrollTop > 110) {
			headerBgc.value = "#ffffff";
			titleColor.value = "#2D2D2D";
		} else {
			headerBgc.value = "transparent";
			titleColor.value = "#2D2D2D";
		}
	})

	onReachBottom(() => {
		if(loading.value=="loading") return
		loading.value="loading"
		if(homestayArticleDataList.value.length==queryData.query.total)return loading.value="finished"
		queryData.query.pageNo++
		initData()
	})
	const queryData=reactive({
		userVlog:{
			type:0,
			tagCode:1
		},
		query:{
			pageNo:1,
			pageSize:20,
			total:0
		}
	})
	const initData=()=>{
		queryData.userVlog.tagCode=1
		getDataList(queryData).then(res=>{
			if(res&&res.result){
				queryData.query.total=res.total
				homestayArticleDataList.value=[...homestayArticleDataList.value,...res.result]
				loading.value="finished"
			}
			else{
				
			}
		}).catch(()=>{
			loading.value="error"
		})
	}
	onLoad(async()=>{
		homestayArticleDataList.value=[]
		const {result} = await commonWordList({
				  keys:"HOMESTAY_STATE_TAG"
				})
				console.log(result)
		tabsList.value=result['HOMESTAY_STATE_TAG']||[]
    active.value=tabsList.value[0].code||'1'
    initData()
	})
</script>

<style lang="scss" scoped>
	::v-deep .wd-tabs__nav{
		height: 0px !important;
	}
	.nodataStyle{
		width: 100%;
	}
	.homestay-content-box{
		padding: 55rpx 28rpx 0;
		.homestay-top-tab{
			.homestay-top-tab-item1{
				// width: 283rpx;
				height: 56rpx;
				margin-right: 20rpx;
			}
			.homestay-top-tab-item2{
				// width: 284rpx;
				height: 56rpx;
			}
		}
	}
	.homestay-article-container{
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		.homestay-article-container-item{
			
			width: 100%;
			margin-bottom: 27rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			background-color: #fff;
			overflow: hidden;
			.homestay-article-image{
				width: 100%;
				height: 347rpx;
			}
			.article-content-text{
				width: 100%;
				padding: 29rpx 26rpx 39rpx;
				box-sizing: border-box;
				text{
					display: block;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #2B2B24;
				}
				.article-text-title{
					font-size: 29rpx;
					font-weight: bold;
				}
				.article-text-content{
					margin-top: 15rpx;
					font-size: 25rpx;
				}
			}
		}
	}
	.main-container {
		min-height: 100vh;
		background-color: #eeefe7;
		overflow-x:hidden;
		position: relative;

		:deep(.swiper-container) {
			width: 100%;
			height: 1277rpx;
			// margin-top: -100rpx;
			position: relative;
			--wot-swiper-radius: 0;
			background-image: url('http://img.abatour.com/2025-05-06/之州_1746510080862.png');
				background-position: center center;
			background-size: 100% 100%;
		}
		.title-img{
			z-index: 100;
			position: absolute;
			top: 400rpx;
			left:37rpx;
			width: 678rpx;
		}
		.Danmaku-item{
			z-index: 100;
			position: absolute;
			top: 720rpx;
			left:37rpx;
			height: 35rpx;
		}
		.text-box-img{
			position: absolute;
			top: 677rpx;
			left: 57rpx;
			width: 658rpx;
			height: 218rpx;
		}
		.clod-image{
			position: absolute;
			top: 820rpx;
			left: 5rpx;
			width: 416rpx;
			height: 409rpx;
			animation: codeMove 20s 1s linear infinite;
		}
.clod-image1{
			position: absolute;
			top: 1120rpx;
			left: 0rpx;
			width: 390rpx;
			// animation: codeMove 15s 1s cubic-bezier(0.4, 0, 0.3, 1) infinite;
			 animation: 
			    horizontalMove 30s linear infinite,
			    verticalFloat 4s ease-in-out infinite alternate;	
		}
		.clod-image2{
			position: absolute;
			top: 1160rpx;
			left: 230rpx;
			width: 331rpx;
			// animation: codeMove2 18s 2s cubic-bezier(0.4, 0, 0.3, 1) infinite;
			  animation: 
			    horizontalMove 40s linear infinite,
			    verticalFloat 5s ease-in-out infinite alternate;
		}
		.clod-image3{
			position: absolute;
			top: 880rpx;
			left: 10rpx;
			width: 370rpx;
			// animation: codeMove 20s 0.3s cubic-bezier(0.4, 0, 0.3, 1) infinite;
			animation: 
			    horizontalMoveReverse 35s linear infinite,
			    verticalFloat 3.5s ease-in-out infinite alternate;
		}
		@keyframes horizontalMove {
		  from { transform: translateX(-100%); }
		  to { transform: translateX(100vw); }
		}
		
		@keyframes horizontalMoveReverse {
		  from { transform: translateX(100vw); }
		  to { transform: translateX(-100%); }
		}
		
		@keyframes verticalFloat {
		  from { transform: translateY(-10px); }
		  to { transform: translateY(10px); }
		}
	// .back-top{
	// 	position: absolute;
	// 	bottom: 500rpx;
	// 	right: 100rpx;
	// 	width: 100rpx;
	// 	height: 100rpx;
	// }

		.play-title-img{
			margin: 54rpx 0 35rpx 0;
			width: 190rpx;
			height: 46rpx;
		}
		
	}
</style>